<!-- todo
功能：
 1.开始按钮菜单弹出（包含搜索
 2.任务列表（带箭头翻页）
 3.日历时钟
 4.所有已打开弹框最小化
样式：
 1.配置上、下、左、右对齐
 2.主题设置
-->
<template>
  <menu class="task-bar">
    <menu-item class="task-bar-btn"><i class="h4 task-bar-btn--b iconfont iconwin"></i></menu-item>
    <menu-item class="task-bar-btn"><i class="h4 task-bar-btn--b iconfont iconControlsearchbar1-24px"></i></menu-item>
    <!-- 已启动应用列表 -->
    <ul class="task-warp">
      <li v-for="(app, index) in $store.getters.openAppList"
          :key="index" @click.stop="$emit('setActiveAppIndex', index)"
          :class="'no-select ' + ($store.getters.activeAppIndex === index?'task-item-active':'')">
        <div class="task-item">
          <div class="left"
               :style="{background: 'url(' +app.icon +') no-repeat center center', backgroundSize: 'cover'}"></div>
          <div class="right g-ft--nowrap">{{app.title}}</div>
        </div>
      </li>
    </ul>
    <menu-item class="task-bar-btn"><i class="h4 task-bar-btn--s iconfont iconup"></i></menu-item>
    <menu-item class="task-bar-btn"><i class="h4 task-bar-btn--s iconfont iconshengyin"></i></menu-item>
    <menu-item class="task-bar-btn">
      <div class="time-wraper task-bar-btn--s">
        <div class="time-wraper-item">{{time}}</div>
        <div class="time-wraper-item">{{date}}</div>
      </div>
    </menu-item>
    <menu-item @click.stop="$emit('setAppListWindowActive', false)" class="task-bar-btn">
      <div style="width: 10px;height: 100%;border-left: 1px solid #ccc"></div>
    </menu-item>
  </menu>
</template>

<script>
  export default {
    name: "TaskBar",
    data() {
      return {
        date: '',
        time: '',
      }
    },
    mounted() {
      this.flushDate();
      setInterval(_ => {
        this.flushDate();
      }, 500);
    },
    methods: {
      flushDate() {
        [this.date, this.time] = new Date().Format("yyyy/MM/dd hh:mm:ss").split(' ');
      }
    },
    computed: {}
  }
</script>

<style scoped>
  .task-bar {
    display: flex;
    width: var(--taskbar_width);
    height: var(--taskbar_height);
    position: absolute;
    bottom: 0;
    opacity: .8;
    background: rgba(14, 14, 14, 0.9);
    color: var(--ft_color);

    /* 按钮 */

    & [class*='task-bar-btn'] {
      text-align: center;
      vertical-align: center;
      height: var(--taskbar_height);
      line-height: var(--taskbar_height);
      cursor: pointer;
    }

    & .task-bar-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    & .task-bar-btn--b {
      padding: 0 20px;
    }

    & .task-bar-btn--s {
      padding: 0 10px;
    }

    & .time-wraper {
      display: flex;
      flex-direction: column;
      padding: 5px 0;
      width: 150px;

      & .time-wraper-item {
        flex: 1;
        height: 0;
        line-height: initial;
        font-size: 15px;
        width: 100%;
      }
    }
  }

  .task-warp {
    display: flex;
    flex: 1;
    width: 0;

    & li {
      height: 100%;
      cursor: pointer;
      padding: 0 10px;
      width: 400px;
      /*border-bottom: 2px solid #83C0EF;*/
    }

    & li:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }

  .task-item-active {
    background: rgba(255, 255, 255, 0.2) !important;
  }

  .task-item {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;

    & .left {
      width: 25px;
      height: 25px;
    }

    & .right {
      flex: 1;
      width: 0;
      padding-left: 5px;
      height: 25px;
    }
  }
</style>
